<!DOCTYPE html>
<html lang="en" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="/layui/css/layui.css">
  <link rel="stylesheet" href="/css/custom.form.css">
</head>
<body>
<div class="panel panel-default operation" hidden>
  <div class="panel-heading title"></div>
</div>

<input hidden id="stationId">

<div class="table_div">
  <div id="searchParam"  >
    <div class="layui-form-item">
      <div class="layui-input-inline">
        <input type="text" id="nameInput" class="layui-input"  autocomplete="off" placeholder="请输入加油站名称">
      </div>
	  
	  <div class="layui-input-inline">
        <input type="text" id="createTimeInput" class="layui-input"  autocomplete="off" placeholder="请输入时间范围">
      </div>
	  
	
      <div class="layui-input-inline ">
        <button class="layui-btn" onclick="search()"  id="search">查询</button>
        <button class="layui-btn"   id="export">导出</button>
      </div>
    </div>

  </div>
  <table class="layui-table" id="showTable" lay-filter="showTable" ></table>
</div>

<div class="table_div1" hidden>
  <div id="searchParam"  >
    <div class="layui-form-item">
      <!-- <div class="layui-input-inline">
        <input type="text" id="nameInput" class="layui-input"  autocomplete="off" placeholder="请输入加油站名称">
      </div> -->

      <div class="layui-input-inline ">
        <!-- <button class="layui-btn" onclick="search1()"  id="search1">查询</button> -->
        
        <button class="layui-btn"   id="export1">导出</button>
        <button class="layui-btn"   id="back">返回</button>
      </div>
      
      <!-- <div class="layui-input-inline ">
      	<button class="layui-btn"   id="back">返回</button>
      </div> -->
      
    </div>

  </div>
  <table class="layui-table" id="showTable1" lay-filter="showTable1" ></table>
</div>


<script type="text/html" id="toolbar">
  
  <div class="layui-btn-container">
    <!-- <button class="layui-btn layui-btn-sm" lay-event="add"  >添加</button> -->
    <!-- <button class="layui-btn layui-btn-sm" lay-event="batchDeleted" >删除</button> -->
  </div>
  
</script>
<script type="text/html" id="toolbar1">
  
  <div class="layui-btn-container">
    <!-- <button class="layui-btn layui-btn-sm" lay-event="add"  >添加</button> -->
    <!-- <button class="layui-btn layui-btn-sm" lay-event="batchDeleted" >删除</button> -->
  </div>
  
</script>
<script type="text/html" id="tool">
   
  <a class="layui-btn layui-btn-xs" lay-event="view" >查看明细</a>
<!--
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  -->
</script>
<script type="text/html" id="tool1">
   
  <a class="layui-btn layui-btn-xs" lay-event="view" >查看明细</a>
<!--
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  -->
</script>
</body>
</html>
<script src="/layui/layui.all.js"></script>
<script src="/js/core.util.js"></script>
<script>
  //获取token
  var token = CoreUtil.getData("access_token");
  //地址栏转义token中的#号
  var tokenQuery = token.replace("#", "%23");
  var tableIns1;
  var tableIns2;
  var table = layui.table;
  var form = layui.form;
  var layer = layui.layer;
  var $ = jQuery = layui.jquery;
  var laydate = layui.laydate;
  
  var firstDayOfMonth = firstDayOfMonth();
  var lastDayOfMonth = lastDayOfMonth();
  console.log(firstDayOfMonth);
  console.log(lastDayOfMonth);
  console.log(firstDayOfMonth + " 至 " + lastDayOfMonth);
  
  $("#createTimeInput").val(firstDayOfMonth + " 至 " + lastDayOfMonth);
  
  
  layui.use(['table', 'layer', 'laydate'], function () {
	laydate.render({
		elem : '#createTimeInput',
		type : 'date',
		range : '至',
		done : function(value, date, endDate) {
			if (value != null && value != undefined
					&& value != "") {
				startTime = value.split("至")[0];
				endTime = value.split("至")[1];
				
			} else {
				startTime = null;
				endTime = null;
			}

		}
	});
	  
    //加载table
    tableIns1 = table.render({
      elem: '#showTable'
      , contentType: 'application/json'
      , headers: {"authorization": token}
      , page: true //开启分页
      , url: '/gas/stationinfo/list2' //数据接口
      , where: {createTimeStart : $("#createTimeInput").val().split('至')[0],
			createTimeEnd : $("#createTimeInput").val().split('至')[1]} // 初始化时的过滤条件
			
      , method: 'POST'
      , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
        return {
          "code": res.code, //解析接口状态
          "msg": res.msg, //解析提示文本
          "count": CoreUtil.isEmpty(res.data) ? 0 : res.data.total, //解析数据长度
          "data": CoreUtil.isEmpty(res.data) ? null : res.data.records //解析数据列表
        }
      }
      , cols: [
        [
          {type: 'checkbox', fixed: 'left'},
          {field: 'id', title: '主键', sort: true, hide: true},
          /* {field: 'pid', title: 'pid', sort: true}, */
          {field: 'name', title: '加油站名称', width: 520,sort: true},
          {field: 'price', title: '累计金额', width: 120,sort: true},
          
          {field: 'field3', title: '油站类型', width: 120,sort: true, templet: function(d) {
				if(d.name.includes("中国石油")||d.name.includes("中石油")){
					return "中国石油";
				}else if(d.name.includes("中国石化")||d.name.includes("中石化")){
					return "中国石化";
				}else{
					return "社会站";
				}
		  }},
          {field: 'taxorgName', title: '所属机关', width: 320,sort: true}, 
		  
          /* 
            {field: '', title: '年月', sort: true, width: 100,templet: function(d) {
				return "202404";
          }}, 
          */
          
          {width: 120, toolbar: "#tool", title: '操作', fixed: 'right'}
        ]
      ]
      , toolbar: '#toolbar'
    });
	
  	//加载table
    tableIns2 = table.render({
      elem: '#showTable1'
      , contentType: 'application/json'
      , headers: {"authorization": token}
      , page: true //开启分页
      , url: '/gas/staytime/list1' //数据接口
      , method: 'POST'
      , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
        return {
          "code": res.code, //解析接口状态
          "msg": res.msg, //解析提示文本
          "count": CoreUtil.isEmpty(res.data) ? 0 : res.data.total, //解析数据长度
          "data": CoreUtil.isEmpty(res.data) ? null : res.data.records //解析数据列表
        }
      }
      , cols: [
        [
          {type: 'checkbox', fixed: 'left'},
          {field: 'id', title: '主键', sort: true, hide: true, width: 130},
          {field: 'fromTopic', title: 'Topic', hide: true, sort: true, width: 227},
          {field: 'station', title: '油站名称', sort: true, width: 297},
          
          
          {field: 'messageMsegtype', title: '油机编号', sort: true, hide: true,width: 122},
          {field: 'messageChannel', title: '通道', hide: true,sort: true, width: 115},
          {field: 'messageAreanumber', title: '区域编号', sort: true, hide: true,width: 102},
          {field: 'messageAreaname', title: '区域名称', sort: true, hide: true,width: 132},
          {field: 'messageRuleid', title: '车辆类型ID', sort: true, hide: true,width: 145},
          {field: 'price', title: '金额（元）', sort: true, width: 145},
          
          {field: 'oils', title: '油品', sort: true, width: 105 },

          /* {field: 'messageRulename', title: '车辆类型名称', sort: true, width: 145}, */
          {field: 'messageProb', hide: true,title: '置信度', sort: true, width: 180},
          {field: 'messageAppear', title: '进入时间', sort: true, width: 200},
          {field: 'messageDisappear', title: '离开时间', sort: true, width: 200},
          {field: 'messageLabel', title: '标注识别编号', sort: true, hide: true,width: 300},
          {field: 'messagePlatennumber', title: '车牌号', hide: true,sort: true, width: 200},
          {field: 'image', title: '图片', width: 170, fixed: 'right', templet: function(d) {
				if(!CoreUtil.isEmpty(d.image)){
					return '<a href="javascript:;" data-src="'+d.image+'" class="layui-table-link" onclick="showImage(this)">出区图片</a>'
						  +'<span style="margin-right: 7px;"> </span>'
					      +'<a href="javascript:;" data-src="'+d.image1+'" class="layui-table-link" onclick="showImage(this)">入区图片</a>';
				
				}
				
				
			  }
		   }
          
          // {width: 120, toolbar: "#tool", title: '操作'}
        ]
      ]
      , toolbar: '#toolbar1'
    });
    
    
    //表头工具
    table.on('toolbar(showTable)', function(obj){
      switch(obj.event){
        case 'batchDeleted':
          var checkStatus = table.checkStatus(obj.config.id);
          var data = checkStatus.data;
          if(data.length==0){
            layer.msg("请选择要批量删除的列");
          }else {
            var ids = [];
            $(data).each(function (index,item) {
              ids.push(item.id);
            });
            tipDialog(ids);
          }
          break;
        case 'add':
          $(".table_div").hide();
          $(".operation").show();
          $(".title").html("新增");
          $(".operation input[name=id]").val("");
          $(".operation input[name=pid]").val("");
          $(".operation input[name=name]").val("");
          $(".operation input[name=open]").val("");
          $(".operation input[name=isParent]").val("");
          $(".operation input[name=checked]").val("");
          $(".operation input[name=icon]").val("");
          $(".operation input[name=type]").val("");
          $(".operation input[name=gbcode]").val("");
          $(".operation input[name=domain]").val("");
          $(".operation input[name=iconSkin]").val("");
          $(".operation input[name=pluginName]").val("");
          $(".operation input[name=indx]").val("");
          $(".operation input[name=platformid]").val("");
          $(".operation input[name=total]").val("");
          $(".operation input[name=onlinetotal]").val("");
          $(".operation input[name=online]").val("");
          $(".operation input[name=field1]").val("");
          $(".operation input[name=field2]").val("");
          $(".operation input[name=field3]").val("");
          $(".operation input[name=field4]").val("");
          $(".operation input[name=field5]").val("");
          $(".operation input[name=deleted]").val("");
          $(".operation input[name=createId]").val("");
          $(".operation input[name=updateId]").val("");
          $(".operation input[name=createWhere]").val("");
          $(".operation input[name=createTime]").val("");
          $(".operation input[name=updateTime]").val("");
          break;
      };
    });
    //列操作
    table.on('tool(showTable)',function (obj) {
      var data = obj.data;
      switch (obj.event) {
        case 'del':
          var ids=[];
          ids.push(data.id);
          tipDialog(ids);
          break;
        case 'view':
          $(".table_div").hide();
          $(".table_div1").show();
          $("#stationId").val(data.id);
          search1(data.id);
          break;
      }
    });

    //导出
    $('#export').on('click', function () {
    	var createTimeInput = $("#createTimeInput").val();
  	  var arr = createTimeInput.split('至');
    	//原先分页limit
      var exportParams = {
        limit: -1,
        key: $("#key").val(),
        name: $("#nameInput").val(),
        createTimeStart : arr[0],
		  createTimeEnd : arr[1],
        
      };
      CoreUtil.sendPost("/gas/stationinfo/list2", exportParams, function (res) {
        //初始化渲染数据
        if (res.data != null && res.data.records != null) {
          table.exportFile(tableIns1.config.id, res.data.records, 'xls');
        }
      });
    });
    
    
  //导出
    $('#export1').on('click', function () {
    	var createTimeInput = $("#createTimeInput").val();
    	  var arr = createTimeInput.split('至');
    	//原先分页limit
      var exportParams = {
        limit: -1,
        key: $("#key").val(),
        // name: $("#nameInput").val(),
  	  	stationId: $("#stationId").val(),
  	  	createTimeStart : arr[0],
	  	createTimeEnd : arr[1],
      };
      
      CoreUtil.sendPost("/gas/staytime/list1", exportParams, function (res) {
        //初始化渲染数据
        if (res.data != null && res.data.records != null) {
          table.exportFile(tableIns2.config.id, res.data.records, 'xls');
        }
      });
    });
  
    
    $('#back').on('click', function () {
    	 $(".table_div1").hide();
         $(".table_div").show();
    });
    //删除
    var tipDialog=function (ids) {
      layer.open({
        content: "确定要删除么?",
        yes: function(index, layero){
          layer.close(index); //如果设定了yes回调，需进行手工关闭
          CoreUtil.sendDelete("/gas/stationinfo/delete",ids,function (res) {
            layer.msg(res.msg, {time:1000},function () {
              search();
            });
          });
        }
      });
    };

    //返回
    $("#btn_cancel").click(function() {
      $(".table_div").show();
      $(".operation").hide();
      return false;
    });

    //监听保存
    form.on('submit(submit)', function(data){
      if(data.field.id===undefined || data.field.id===null || data.field.id===""){
        CoreUtil.sendPost("/gas/stationinfo/add",data.field,function (res) {
          $(".table_div").show();
          $(".operation").hide();
          search();
        });
      }else {
        CoreUtil.sendPut("/gas/stationinfo/update",data.field,function (res) {
          $(".table_div").show();
          $(".operation").hide();
          search();
        });
      }

      return false;
    });
  });

  //执行查询
  function search() {
    
	  var createTimeInput = $("#createTimeInput").val();
	  var arr = createTimeInput.split('至');
	  
	  //这里以搜索为例
    tableIns1.reload({
      where: { //设定异步数据接口的额外参数，任意设
    	  name: $("#nameInput").val(),
    	  createTimeStart : arr[0],
		  createTimeEnd : arr[1],
      }
      , page: {
        curr: 1 //重新从第 1 页开始
      }
    });
  };
  
  function search1(id){
	  var createTimeInput = $("#createTimeInput").val();
	  var arr = createTimeInput.split('至');
	  
	  //这里以搜索为例
	    tableIns2.reload({
	      where: { //设定异步数据接口的额外参数，任意设
	    	  // name: $("#nameInput").val(),
	    	  stationId:id,
	    	  createTimeStart : arr[0],
			  createTimeEnd : arr[1],
	      }
	      , page: {
	        curr: 1 //重新从第 1 页开始
	      }
	    });
	    
  };
  
  function showImage(obj) {
	  var src = $(obj).attr('data-src'); // 获取图片地址
	  layer.open({
	    type: 1,
	    title: false,
	    closeBtn: 0,
	    area: '500px',
	    skin: 'layui-layer-nobg', // 没有背景色的弹层
	    shadeClose: true,
	    content: '<img src="' + src + '" alt="图片" style="margin: auto; max-width: 100%; max-height: 100%">'
	  });
   };
 
   
 	function firstDayOfMonth() {
  		const currentDate = new Date();
  		const year = currentDate.getFullYear();//获取当前年
  		const month = String(currentDate.getMonth() + 1).padStart(2, "0");//获取当前月
  		const firstDay = "01";//日
  		return `${year}-${month}-${firstDay}`;
    };
	
    function lastDayOfMonth() {
    	// 获取当前日期
    	const currentDate = new Date();
    	// 获取当前年份
    	let year = currentDate.getFullYear();
    	// 获取下个月的月份，使用 padStart 在月份小于 10 时在前面补零
    	let month = String(currentDate.getMonth() + 2).padStart(2, "0");
    	// 如果月份为 '13'，说明当前是12月，需要更新年份并将月份设置为 '01'
    	if (month === '13') {
    	    year = year + 1;
    	    month = '01';
    	}
    	 
   	  	// 设置每个月的第一天为 '01'
   	  	let firstDay = "01";
   	  	// 构建下个月的第一天的日期字符串，格式为 'YYYY-MM-DD'
   	  	const firstDayOfNextMonth = `${year}-${month}-${firstDay}`;
   	  	// 计算当前月的最后一天，通过减去一天的毫秒数来得到
   	  	const lastDayOfMonth = new Date(new Date(firstDayOfNextMonth).getTime() - 86400000);
   	  	// 将最后一天的日期转换为 ISO 格式，并提取日期部分
   	  	return lastDayOfMonth.toISOString().split("T")[0];
	}
   
</script>